<template>
  <div class="background">
    <el-card class="box-card">
        <el-tabs v-model="currentIndex" stretch @tab-click="handTaClick">
          <el-tab-pane label="登录" name="login">
            <el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-width="100px">
              <el-form-item label="账号" prop="name">
                <el-input v-model="loginForm.name" placeholder="用户名/手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="注册" name="register">
            <el-form ref="registerRef" :model="registerForm" :rules="registerRules" label-width="100px">
              <el-form-item label="手机号" prop="telephone">
                <el-input v-model="registerForm.telephone" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="用户名" prop="name">
                <el-input v-model="registerForm.name" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="configurePassword">
                <el-input type="password" v-model="registerForm.configurePassword" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="regSub()">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
  </div>
</template>

<script>
export default {
    data() {
      const configurePassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'))
          } else if (value !== this.registerForm.password) {
            callback(new Error('两次输入密码不一致!'))
          } else {
            callback()
          }
        }
        return {
          activeTab: 'login',
          currentIndex: 'login',
          loginForm: {
            name: '',
            password: ''
          },
          loginRules: {
            name: [{ required: true, message: '请输入用户名', trigger: 'blur' },
                   { min: 3, max: 10, message: '用户名的长度在3~10个字符之间', teigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' },
                       { min: 6, max: 15, message: '密码的长度在6~15个字符之间', teigger: 'blur' }]
          },
          registerForm: {
            name: '',
            password: '',
            configurePassword: '',
            telephone: ''
          },
          registerRules: {
            name: [{ required: true, message: '请输入用户名', trigger: 'blur' },
                   { min: 3, max: 10, message: '用户名的长度在3~10个字符之间', teigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' },
                       { min: 6, max: 15, message: '密码的长度在6~15个字符之间', teigger: 'blur' }],
            telephone: [
                      { required: true, message: '请输入手机号码', trigger: 'blur' },
                      { pattern: /^1[0-9]{10}$/, message: '手机号格式不正确', trigger: 'blur' }
                    ],
            configurePassword: [
              {
                validator: configurePassword,
                trigger: 'blur'
              }
            ]
          }
        }
    },
    created() {},
    methods: {
      submitForm() {
        console.log('登录信息：')
        console.dir(this.loginForm)
        this.$refs.loginRef.validate(async valid => {
          if (!valid) return
            const { data: res } = await this.$axios.post('/member/login', this.loginForm)
            console.log(res)
            if (res.code !== 200) {
              const msg = res.data.msg
              return this.$message.error(`登录失败，${msg}，请重试！`)
            }
            // 保存用户信息
            // localStorage会保留原始数据，即使关闭浏览器，数据仍然存在。
            // 而sessionStorage不会保留，关闭浏览器后数据被销毁
            window.localStorage.setItem('userToken', res.data.token)
            window.localStorage.setItem('userID', res.data.member[0].id)
            window.localStorage.setItem('membertouxiang', res.data.member[0].headportrait)
            this.$message.success('登录成功！')
            this.$router.push('/home')
            // window.location.reload()
        })
    },
    regSub() {
      this.$refs.registerRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$axios.post('/member/register', this.registerForm)
        console.log(res)
        let msg
        if (res.code !== 200) {
          if (res.code === 409) {
            msg = res.data.msg
          }
          return this.$message.error(`注册失败，${msg}`)
        }
        this.$message.success('注册成功,请登录！')
        this.activeTab = 'login'
      })
    },
    handTaClick(tab) {
      console.log(tab.name)
      this.activeTab = tab.name
    }
  }
}
</script>

<style lang="less" scoped>
.background {
  width: 100%;
  height: 450px;
  background-image: url('../../assets/dog.jpg'); // 替换为你的背景图片链接
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 1200px;
  margin: 0 auto;
  .box-card {
    width: 600px;
    margin: 100px auto;
  }
}
</style>
